<template>
  <div>
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in 4" :key="item">
        <!--        <img src="../../assets/images/ls/banner1.png" alt="" />-->
        <!--        <div-->
        <!--          style="-->
        <!--            background: url('http://nz_api.xw025.com/Upload/banner/banner1.png')-->
        <!--              center center no-repeat;-->
        <!--            height: 330px;-->
        <!--            width: 100%;-->
        <!--          "-->
        <!--        ></div>-->
        <!--      </el-carousel-item>-->
        <div
            :style="{
            background:
              'url(http://nz_api.xw025.com/Upload/banner/banner' +
              item +
              '.png) center center no-repeat',
            height: '330px',
            width: '100%',
          }"
        ></div>
      </el-carousel-item>
    </el-carousel>
    <div class="index-btn-box ant-bg-color-ffffff">
      <IndexBtnBox @antClick="indexBtnBox"></IndexBtnBox>
    </div>
    <div class="w-1200 ant-flex">
      <div class="index-body-left">
        <div class="ant-flex">
          <div class="index-cb ant-bg-color-ffffff">
            <el-tabs v-model="activeName" @tab-click="handleClick"  v-if="list.length != 0">
              <el-tab-pane name="first" >
                <span slot="label" @mouseover="mouseover('first')">晨报</span>
                <template v-if="list.cb.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.cb"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <div class="index-cb_title" >
                      · {{ item.title }}
                    </div>
                    <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane name="second">
                <span slot="label" @mouseover="mouseover('second')">研报</span>
                <template v-if="list.yb.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.yb"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <div class="index-cb_title" >
                      · {{ item.title }}
                    </div>
                    <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane name="third">
                <span slot="label" @mouseover="mouseover('third')">期权</span>
                <template v-if="list.qq.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.qq"  :key="String(index)" @click='goTo("ReadReadPdf", item.id)'>
                    <div class="index-cb_title" >
                      · {{ item.title }}
                    </div>
                    <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane name="fourth">
                <span slot="label" @mouseover="mouseover('fourth')">量化</span>
                <template v-if="list.lh.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.lh"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <div class="index-cb_title" >
                      · {{ item.title }}
                    </div>
                    <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="index-gsgg ant-bg-color-ffffff" v-if="list.length != 0">
            <el-tabs v-model="rightName" @tab-click="handleClick"  v-if="list.length != 0">
              <!--              <el-tab-pane label="公司公告" name="gsgg" >-->
              <el-tab-pane name="gsgg" >
                <span slot="label" @mouseover="rightmouseover('gsgg')">公司公告</span>
                <template v-if="list.cb.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.cb"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <div class="index-cb_title" >
                      · {{ item.title }}
                    </div>
                    <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane name="jgxq">
                <span slot="label" @mouseover="rightmouseover('jgxq')">交割行权</span>
                <template v-if="list.jgxq .length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.jgxq"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <div class="index-cb_title" >
                      · {{ item.title }}
                    </div>
                    <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
            <!--            <div class="index-gsgg_title">公司公告</div>-->
            <!--            <template v-if="list.gsgg.length==0" >-->
            <!--              <div class="ant-flex ant-flex-between">-->
            <!--                暂无数据-->
            <!--              </div>-->
            <!--            </template>-->
            <!--            <template v-else>-->
            <!--              <div class="ant-flex ant-flex-between" style="cursor: pointer"  v-for="(item,index) in list.gsgg"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>-->
            <!--                <img-->
            <!--                    v-if="index < 3"-->
            <!--                    class="index-gsgg_img"-->
            <!--                    src="../../assets/images/hot.png"-->
            <!--                    alt=""-->
            <!--                />-->
            <!--                <div class="index-gsgg_info">-->
            <!--                  {{ item.title }}-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </template>-->
          </div>
        </div>
        <div class="index-jjlc">
          <div class="index-jjlc-left">
            <div class="index-jjlc-left-title">热门活动</div>
            <div class="ant-flex">
              <div class="ant-flex index-huodong">
                <div style="margin-right: 10px;">
                  <div class="index-huodong-title">
                    第三届宁证期货“信·服”杯私募实盘大赛
                  </div>
                  <div class="index-huodong-info">
                    此次大赛旨在进一步拓展和深化宁证期货与优质私此次大赛旨在进一步拓展和深化宁证期货与优质私
                  </div>
                </div>
                <div>
                  <div class="index-huodong-btn">报名参赛</div>
                  <div class="index-huodong-btn" style="margin-top: 10px;">
                    赛事规则
                  </div>
                </div>
              </div>
              <div class="ant-flex index-huodong">
                <div style="margin-right: 10px;">
                  <div class="index-huodong-title">
                    第三届宁证期货“信·服”杯私募实盘大赛
                  </div>
                  <div class="index-huodong-info">
                    此次大赛旨在进一步拓展和深化宁证期货与优质私此次大赛旨在进一步拓展和深化宁证期货与优质私
                  </div>
                </div>
                <div>
                  <div class="index-huodong-btn">报名参赛</div>
                  <div class="index-huodong-btn" style="margin-top: 10px;">
                    赛事规则
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ant-flex ant-flex-between">
          <div class="zj-box">
            <img style="width: 100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180122%2F192cb68c3dcd4df89a56017b644af6cb.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613749998&t=601cda17e7713d76562b9d470702c49a" />
            <div class="zj-box-title">持仓分析</div>
            <div class="zj-box-info">最新机构持仓变动分析和成交持仓查询</div>
          </div>
          <div class="zj-box">
            <img style="width: 100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180122%2F192cb68c3dcd4df89a56017b644af6cb.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613749998&t=601cda17e7713d76562b9d470702c49a" />
            <div class="zj-box-title">商品指数</div>
            <div class="zj-box-info">综合反映国内上市商品品种的接个波动情况</div>
          </div>
          <div class="zj-box">
            <img style="width: 100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180122%2F192cb68c3dcd4df89a56017b644af6cb.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613749998&t=601cda17e7713d76562b9d470702c49a" />
            <div class="zj-box-title">经济数据</div>
            <div class="zj-box-info">最新全球宏观经济管理和产业经济数据</div>
          </div>
        </div>

        <!--        <div class="index-jjlc">-->
        <!--          <div class="index-jjlc-left">-->
        <!--            <div class="index-jjlc-left-title">基金理财</div>-->
        <!--            <div>-->
        <!--              <el-table :data="tableData" stripe style="width: 100%;">-->
        <!--                <el-table-column prop="jjdm" label="基金代码" width="80px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="jjmc" label="基金名称">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="dwjz" label="单位净值" width="90px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="rzdz" label="日涨跌幅" width="90px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="jyz" label="近一周" width="90px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="jyy" label="近一月" width="90px">-->
        <!--                </el-table-column>-->
        <!--              </el-table>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
      <div class="index-body-right">
        <div class="index-body-right-box ant-bg-color-ffffff">
          <div class="ant-flex ant-flex-between">
            <div class="index-gsgg_title">快速通道</div>
            <div class="ant-flex index-body-right-login">
              <!--              <img src="../../assets/images/userico.png" alt="" />-->
              <!--              <div class="index-body-right-login-btn">登录</div>-->
            </div>
          </div>
          <div class="ant-flex index-body-right-call">
            <img src="../../assets/images/call.png" alt="" />
            <div class="index-body-right-call-text">全国客服：400-822-1758</div>
          </div>
          <div>
            <IndexBtnPro></IndexBtnPro>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
              <span
                  :class="data.isSelected ? 'is-selected' : ''"
                  @click="allcalendar(data.day)"
              >
                <!-- {{ data.day.split('-').slice(1).join('-') }} -->
                {{ data.day.split("-").slice(2).join("-") }}
              </span>
            </template>
          </el-calendar>
          <div class="index-rili-top" v-if="rili.isShow == true">
            <div class="index-rili-top-title">
              <i
                  class="el-icon-close index-rili-top-gb"
                  @click="rili.isShow = false"
              ></i>
              {{ rili.date }} 事件
            </div>
            <div class="index-rili-title">
              <i class="el-icon-date" style="margin-right: 8px;"></i>交易日历
            </div>
            <template v-if="rili.datalist.length!=0">
              <div class="index-rili-list"  v-for="(i,index) in rili.datalist" :key="String(index)" @click='goTo("ReadReadPdf",i.id)'>
                <i class="el-icon-caret-right" style="margin-right: 8px;"></i
                >{{ i.title }}
              </div>
            </template>
            <div class="index-rili-list" v-else>
              暂无数据
            </div>

          </div>
        </div>
        <div class="index-body-right-img">
          <!--          <img src="../../assets/images/ls/sjzx.png" alt="" />-->
          <img src="../../assets/images/ls/tjyd.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import index from './myindex'
export default index;
</script>

<style scoped lang="scss">
@import "~@/assets/scss/style.scss";
</style>
